<template>
  <div class="AdendDialog">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="账号" prop="name">
            <el-input v-model="ruleForm.name" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名" prop="username">
            <el-input v-model="ruleForm.username" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话" prop="mobile">
            <el-input v-model="ruleForm.mobile" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              clearable
              v-model="ruleForm.password"
              autocomplete="new-password"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="重复密码" prop="checkPass">
            <el-input
              type="password"
              clearable
              v-model="ruleForm.checkPass"
              autocomplete="new-password"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门" prop="orgId">
            <el-cascader
              v-model="ruleForm.orgId"
              :options="orgTree"
              placeholder="请选择部门"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="生日">
            <el-date-picker
              clearable
              v-model="ruleForm.birthday"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="性别">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="ruleForm.remark" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      classId: [],
      classList: [],
      camList:[],
      ruleForm: {
        name: "",
        username: "",
        mobile: "",
        password: "",
        checkPass: "",
        email: "",
        sex: 1,
        remark: "",
        orgId: "",
        camId:"",
        birthday: "",
        workArea: "",
        classId: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        username: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: /^1[345789]\d{9}$/,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            validator: validatePass,
            trigger: "blur",
          },
        ],
        checkPass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            validator: validatePass2,
            trigger: "blur",
          },
        ],
        email: [
          {
            pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
            message: "邮箱格式错误",
            trigger: "blur",
          },
        ],
        orgId: [
          {
            required: true,
            message: "请选择部门",
            trigger: "change",
          },
        ],
        camId:[
          {
            required: true,
            message: "请选择校区",
            trigger: "change",
          }
        ]
      },
      orgTree: [],
    };
  },
  created: function () {
    // 获取部门选择树
    this.getSysOrgTree();
            const params = {
              pCode: 'CAMPUS'
            }
            this.$server.queryDictList(params)
              .then(res => {
                console.log(res.data)
                this.camList = res.data
              })
  },
  mounted() {
    let params = {};
    this.$server.getMemberClassTreeList(params).then((res) => {
      console.log(res);
      this.classList = res.data;
    });
  },
  methods: {
    // 获取部门选择树
    getSysOrgTree: function () {
      let params = {};
      this.$server.getSysOrgTree(params).then((res) => {
        let orgTree = res.orgTree;
        orgTree = this.parseTreeJson(orgTree);
        this.orgTree = orgTree;
      });
    },

    // 递归组装部门树
    parseTreeJson: function (array) {
      let tempArr = [];
      for (let i = 0; i < array.length; i++) {
        let temp = {
          value: array[i].id,
          label: array[i].fullName,
        };
        if (array[i].childrens && typeof array[i].childrens == "object") {
          temp.children = this.parseTreeJson(array[i].childrens);
        }
        tempArr.push(temp);
      }
      return tempArr;
    },

    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            name: this.ruleForm.name,
            username: this.ruleForm.username,
            password: this.ruleForm.password,
            mobile: this.ruleForm.mobile,
            sex: this.ruleForm.sex,
            orgId: this.ruleForm.orgId[this.ruleForm.orgId.length - 1],
            email: this.ruleForm.email,
            remark: this.ruleForm.remark,
            birthday: this.ruleForm.birthday,
            workArea: this.ruleForm.workArea,
          };
          this.$server.addSysUserSave(params).then((res) => {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            // 关闭弹框
            this.$emit("chang");
          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$emit("chang");
    },
  },
};
</script>
<style lang="scss" scoped>
.AdendDialog {
}

.el-cascader {
  width: 100%;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
